<template>
	<view class="container">
		<!-- 顶部蓝色背景和标题 -->
		<view class="header">
			<text class="title">欢迎来到车联网服务平台商家端</text>
			<!-- <image class="header-img" src="/static/login.png" mode="aspectFit"></image> -->
		</view>
		<!-- 登录表单 -->
		<view class="form">
			<input class="input" v-model="phone" type="number" maxlength="11" placeholder="手机号登陆"
				placeholder-class="input-placeholder" />
			<view class="code-row">
				<input class="input code-input" v-model="code" maxlength="6" placeholder="输入验证码"
					placeholder-class="input-placeholder" />
				<button class="code-btn" @click="getCode">获取验证码</button>
			</view>
			<view class="register-row">
				<text class="register-link" @click="goRegister">立即注册 &gt;</text>
			</view>
			<button class="login-btn" @click="login">登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import request from '../util/request.js';
	import baseUrl from '../util/urlConfig.js';

	const phone = ref('')
	const code = ref('')
	const uuid = ref('')
	const director = ref('')
	const VMerchant = ref({})
	const merchant = ref({})

	const getCode = () => {
		// 这里写获取验证码逻辑
		// request({
		// 	url: 'http://localhost:8080/auth/sendCode',
		// 	method: 'POST',
		// 	data: null,
		// 	success(res) {
		// 		console.log(res.data.data);
		// 		uuid.value = res.data.data;
		// 	}
		// });

		request({
			url: baseUrl + '/wx/verification/getMerchant',
			method: 'GET',
			data: {
				mobile: phone.value
			},
			success(res) {
				console.log(res.data);
				if (res.data.code == 200) {
					VMerchant.value = res.data.data;
					director.value = res.data.data.director;
					request({
						url: baseUrl + '/auth/sendCode',
						method: 'POST',
						data: null,
						success(res) {
							console.log(res.data.data);
							uuid.value = res.data.data;
						}
					});
					request({
						url: baseUrl + '/wx/merchant/getMerchant',
						method: 'GET',
						data: VMerchant.value,
						success(res) {
							merchant.value = res.data.data;
						}
					});

				} else {
					console.log("发送验证码失败，没有该商户或审核未通过！")
				}
			}
		});
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		})
	}

	const goRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}

	const login = () => {
		// 这里写登录逻辑
		request({
			url: baseUrl + '/auth/merchantLogin',
			method: 'POST',
			data: {
				username: director.value,
				password: '123456',
				code: code.value,
				uuid: uuid.value
			},
			success(res) {
				console.log(res.data)
				if (res.data.code == 200) {

					console.log(res.data.data.access_token)
					uni.setStorageSync("token", res.data.data.access_token);
					uni.setStorageSync("VMerchant", VMerchant.value);
					uni.setStorageSync("merchant", merchant.value);
					

					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					setTimeout(() => {
					  uni.navigateTo({
					    url: '/pages/index/index'
					  });
					}, 500);
				}else{
					console.log(res.data.msg);
				}
			}
		});


	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background: #fff;
	}

	.header {
		background: linear-gradient(135deg, #248afd 0%, #3b7cff 100%);
		height: 260rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.title {
		color: #fff;
		font-size: 36rpx;
		margin-top: 80rpx;
		text-align: center;
		font-weight: 500;
		z-index: 2;
	}

	.header-img {
		width: 320rpx;
		height: 140rpx;
		position: absolute;
		right: 40rpx;
		top: 100rpx;
		z-index: 1;
	}

	.form {
		margin: 0 auto;
		margin-top: 60rpx;
		width: 80vw;
		max-width: 650rpx;
		background: #fff;
		border-radius: 30rpx;
		box-shadow: 0 8rpx 32rpx rgba(36, 138, 253, 0.08);
		padding: 60rpx 30rpx 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.input {
		height: 90rpx;
		border: none;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		margin-bottom: 30rpx;
		background: transparent;
		padding-left: 0;
	}

	.input-placeholder {
		color: #ccc;
		font-size: 30rpx;
	}

	.code-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.code-input {
		flex: 1;
		margin-right: 20rpx;
	}

	.code-btn {
		background: #4d8afd;
		color: #fff;
		border-radius: 50rpx;
		font-size: 28rpx;
		padding: 0 36rpx;
		height: 70rpx;
		line-height: 70rpx;
		border: none;
	}

	.register-row {
		text-align: left;
		margin-bottom: 40rpx;
	}

	.register-link {
		color: #3b7cff;
		font-size: 28rpx;
	}

	.login-btn {
		background: linear-gradient(90deg, #4d8afd 0%, #166dff 100%);
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
		border: none;
		margin-top: 10rpx;
	}
</style>